<template>
  <el-dialog
    class="collect-money-record-dialog"
    width="1200px"
    :visible.sync="dialogVisible"
    title="收款记录"
    :close-on-click-modal="false"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-table :data="tableList" border v-loading="tableLoading">
      <el-table-column prop="paymentUserName" label="收款人" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="agreementPaymentAmount" label="收款金额" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.agreementPaymentAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitName" label="收款单位" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paymentAccount" label="收款账户" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paymentTime" label="收款时间" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentTime }}</span>
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" prop="" width="100">
        <template slot-scope="scope">
					<el-link type="primary" v-if="checkPermi(['basic:agreementPaymentRecord:edit']) && scope.row.beOperate" @click="handleEditCollectRecord(scope.row)">修改</el-link>
          <el-link style="margin-left: 10px;" type="danger" v-if="checkPermi(['basic:agreementPaymentRecord:delete']) && scope.row.beOperate" @click="handleDeleteCollectRecord(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="dialog-footer" slot="footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>

    <!-- 收款弹框 -->
    <CollectMoneyDialog
      :show.sync="showCollectMoneyDialog"
      :row="row"
      :recordRow="currRecordRow"
      @refresh="getTableListData"
    ></CollectMoneyDialog>
  </el-dialog>
</template>

<script>
import CollectMoneyDialog from './CollectMoneyDialog.vue'
import { collectMoneyRecord, collectMoneyRecordDelete } from '@/api/person/collectmoney'

export default {
  name: 'CollectMoneyDetailDialog',
  components: {
    CollectMoneyDialog
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,

      showCollectMoneyDialog: false,
      currRecordRow: {},
    }
  },
  created() {
    this.initQueryParams()
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getTableListData()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.tableList = []
      this.$emit('refresh')
    },
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10000,
      }
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      return params
    },
    // 获取收款记录列表
    getTableListData() {
      const params = this.getQueryParams()
      params.agreementId = this.row.agreementId
      collectMoneyRecord(params).then(res => {
        this.tableList = res.data || []
        this.tableTotal = res.total || 0
      }).catch(err => {})
    },
    // 点击修改收款记录
    handleEditCollectRecord(row) {
      this.currRecordRow = row
      this.showCollectMoneyDialog = true
    },
    // 点击删除收款记录
    handleDeleteCollectRecord(row) {
      this.$modal.confirm('是否确认删除该收款记录?').then(() => {
        return collectMoneyRecordDelete(row.paymentRecordId)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getTableListData()
      }).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.collect-money-record-dialog {

  ::v-deep .el-dialog__body {
    max-height: 90vh;
    overflow-y: auto;
  }
}
</style>
